<template>
  <div class="box">
    <div class="header">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div class="flex">
          <div class="flex-content">
            <el-form-item label="所属网点" prop="networkNameId">
              <el-select
                v-model="form.networkNameId"
                placeholder="请选择所属网点"
              >
                <el-option
                  v-for="item in networkList"
                  :key="item.id"
                  :label="item.networkName"
                  :value="item.networkName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="配置名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入配置名称" />
            </el-form-item>
            <el-form-item label="拉均对象" prop="pullUniformObject">
              <el-select
                v-model="form.pullUniformObject"
                placeholder="请选择拉均对象"
              >
                <el-option
                  v-for="(n, i) in ljdx"
                  :key="i"
                  :label="n.label"
                  :value="n.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="成员" prop="member">
              <el-input v-model="form.member" placeholder="请输入成员名称" />
            </el-form-item>
          </div>
          <div class="flex-end">
            <el-form-item>
              <el-button class="cx" @click="cx">查询</el-button>
              <el-button class="cz" @click="clear">重置</el-button>
            </el-form-item>
          </div>
        </div>
        <div class="flex">
          <el-form-item label="关联客户" prop="client">
            <el-input v-model="form.client" placeholder="请输入关联客户名称" />
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="flex flex-between">
      <div>
        当前页共<span>{{ tableData.length }}</span
        >项
      </div>
      <div>
        <el-button class="xz">新增</el-button>
      </div>
    </div>
    <elltable :loading="loading" :data="tableData" :th="thtable" />
    <div class="block" style="display: flex; justify-content: flex-end">
      <pagination
        :current-page="form.pageDate.pageNum"
        :page-size="form.pageDate.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getOutletsList, pullEvenSearch } from '@/api/dashboard'

export default {
  data() {
    return {
      loading: false,
      form: {
        networkNameId: '',
        pullUniformObject: '',
        name: '',
        member: '',
        client: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      // 拉均对象
      ljdx: [{
        value: '1',
        label: '客户'
      }, {
        value: '2',
        label: '承包区'
      }, {
        value: '3',
        label: '业务员'
      }],
      // 网点列表
      networkList: [],
      total: 0,
      tableData: [],
      thtable: [],
      // 表单验证
      rules: {
        networkNameId: [
          { required: true, message: '请选择网点名称', trigger: 'change' }
        ],
        pullUniformObject: [
          { required: true, message: '请选择拉均对象', trigger: 'change' }
        ]
      }

    }
  },
  created() {
    // this.getList()
    this.getOutLet()
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data
        }
      })
    },
    // 查询
    cx() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.search()
        } else {
          return false
        }
      })
    },
    // 查询
    search() {
      this.loading = true
      pullEvenSearch(this.form).then((res) => {
        console.log('查询', res)
        if (res.code === 200) {
          this.loading = false

          this.thtable = res.data.fields
          this.tableData = res.data.list.data
          this.total = res.data.list.total
        } else {
          this.loading = false

          this.tableData = []
          this.total = 0
        }
      })
    },
    // 重置
    clear() {
      this.$refs.form.resetFields()
    },
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val
      this.form.pageDate.pageNum = 1
      this.search()
    },
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val
      this.search()
    }

  }

}
</script>

<style
  lang="scss"
  scoped
>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  width: 100%;

  .el-form-item {
    width: 21%;
  }
}

.flex-between {
  padding: 20px;
  justify-content: space-between;
  span {
    color: #2087d0;
  }
}

.flex-content {
  display: flex;
  width: 84%;
  justify-content: space-between;

  .el-form-item {
    width: 25%;

    &::v-deep .el-select {
      width: 100%;
    }
  }
}

.flex-end {
  width: 16%;
  margin-left: 10px;
  .el-form-item {
    width: 100%;

    &::v-deep .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cx {
  width: 80px;
  height: 42px;
  border-radius: 21px;
  color: #ffffff;
  background: #2087d0;
}
.cz {
  width: 80px;
  height: 42px;
  border-radius: 21px;
  border: 1px solid #666666;
  color: #333;
}
.xz {
  color: #ffffff;
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
}
.el-button {
  padding: 0;
}
</style>
